<%--
  Created by IntelliJ IDEA.
  User: Cc
  Date: 2020/12/30
  Time: 16:51
  To change this template use File | Settings | File Templates.
--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" +
            request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <link rel="shortcut icon" href="<%=basePath%>static/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="<%=basePath%>static/css/font.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/xadmin.css">
    <link rel="stylesheet" href="<%=basePath%>static/css/bootstrap.css">
    <script type="text/javascript" src="<%=basePath%>static/js/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/jqPaginator.js"></script>
    <script type="text/javascript" src="<%=basePath%>static/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="<%=basePath%>static/js/xadmin.js"></script>

</head>

<body>
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="#">用户列表</a>
      </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript:location.replace(location.href);" title="刷新">
        <i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so">
            <input type="text" placeholder="请输入用户名" id="queryUser" autocomplete="off" class="layui-input">
            <button class="layui-btn" type="button" onclick="selectUserByUsername()"><i class="layui-icon">&#xe615;</i></button>
        </form>
    </div>

    <xblock>
        <button class="layui-btn" onclick="x_admin_show('添加用户','/jsp/user-add.jsp',500,450)"><i class="layui-icon"></i>添加
        </button>
        <span class="x-right" style="line-height:40px" id="showTotal">共有数据：1 条</span>
    </xblock>
    <table class="layui-table">
        <thead>
        <tr>
            <th hidden>ID</th>
            <th>序号</th>
            <th>登录名</th>
            <th>密码</th>
            <th>角色</th>
            <th>状态</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="tab"></tbody>
        <tr>
            <td colspan="8" align="center">
                <ul class="pagination" id="pagination1"></ul>
            </td>
        </tr>
    </table>


</div>
<script>
    $(document).ready(function enterJudge(e) {
	$(this).keydown(function (e) {
		if (e.which=="13" && $("#queryUser").val() != ''){
            selectUserByUsername();
			return false;
		}
	})
})

    // 总页数
    let totalPages = 0;
    // 总条数
    let totalCounts = 0;
    // 当前页
    let currentPage = 0;

    // 加载分页按钮的
    $(document).ready(function () {
        // 1、初始化参数的值，调用一次查询用户的方法，查询第一页
        selectAll(1);
        // 2、加载按钮
        $('#pagination1').jqPaginator({
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            // 按钮设置
            first:'<li class="first"><a href="javascript:void(0)">首页</a></li>',
            prev:'<li class="prev"><a href="javascript:void(0)">上一页</a></li>',
            next:'<li class="next"><a href="javascript:void(0)">下一页</a></li>',
            last:'<li class="last"><a href="javascript:void(0)">末页</a></li>',
            page:'<li class="page"><a href="javascript:void(0)">{{page}}</a></li>',
            // 回调函数 ===> 当页面的值发生改变的时候，就回去执行导函数
            onPageChange: function (pageNum) {
                selectAll(pageNum);
            }
        })

    })

    // 执行查询用户方法
    function selectAll(pageNum) {
        $.ajax({
            url:"../user/selectAll",
            type:"post",
            async:false,
            dataType:"json",
            data:{
                pageNum:pageNum,
                pageSize:6,
                username:$("#queryUser").val()
            },success:function (data) {
                //获取data中的数据
                //console.log(data.result);
                let userList = data.result.list;
                //判断用户数据是否为null
                if(userList.length>0){
                    totalPages = data.result.pages; // 总页数
                    totalCounts = data.result.total; // 总条数
                    currentPage = data.result.pageNum; // 当前页
                    //定义一个空字符串
                    let str = "";
                    //进行用户数据操作
                    for (let i = 0; i <userList.length ; i++) {
                        // 每次需要初始化字符串，所以放在循环内部
                        let roles = "";
                        // 取出所有用户的角色名
                        for (let j = 0; j <userList[i].roles.length ; j++) {
                            roles += userList[i].roles[j].roleName+" ";
                        }
                        //字符串拼接
                        str += '<tr>' +
                            '<td hidden>' + userList[i].userId + '</td>' +
                            '<td>' +( (i+1)+(6*(currentPage-1)) )+ '</td>' +
                            '<td>' + userList[i].username + '</td>' +
                            '<td>' + userList[i].password + '</td>' +
                            '<td>' + roles + '</td>' +
                            '<td>' + userList[i].userStatus + '</td>' +
                            '<td><button type="button" class="layui-btn layui-btn-warm" onclick="openUpdateWindow(this)">修改</button>&nbsp;&nbsp;' +
                            '<button type="button" class="layui-btn layui-btn-danger" onclick="deleteUserByUsername(' + "'" + userList[i].username  + "'" + ')">删除</button></td>' +
                            '</tr>'
                    }
                    // 把字符串内容填充在html页面中
                    $('#tab').html(str);
                }else {
                    $('#tab').html('<tr><td align="center" colspan="6">没有用户数据，请添加</td></tr>');
                }
            },error:function () {
                alert("查询用户服务器错误");
            }
        })
    }

    function deleteUserByUsername(username) {
        if (confirm("你确定要删除此用户吗？")) {
            $.ajax({
                url: "../user/deleteUserByUsername",
                dataType: "json",
                type: "post",
                data: {
                    username: username
                }, success: function (data) {
                    if (data.status == 200) {
                        layer.alert("删除成功", {icon: 6}, function () {
                            location.reload();
                        })
                    } else {
                        layer.alert("删除失败", {icon: 5}, function () {
                            location.reload();
                        })
                    }
                }, error: function () {
                    alert("删除用户服务器失败")
                }
            })
        }
    }


    function openUpdateWindow(obj) {
        //当前对象是一个DOM对象，是不能使用jQuery方法的，所以，首先要把DOM对象转换为jQuery
        let username = $(obj).parent().parent().find("td").eq(2).text();
        let password = $(obj).parent().parent().find("td").eq(3).text();
        //把获取到的值，存入localStorage本地
        localStorage.setItem("username",username);
        localStorage.setItem("password",password);

        x_admin_show("修改用户","/jsp/user-edit.jsp",500,400);
    }

    // 模糊查询
    function selectUserByUsername() {
        //初始化模糊查询用户数据的总条数、总页数、当前页面值
        selectAll(1);
        // 2、加载按钮
        $('#pagination1').jqPaginator({
            totalPages:totalPages,
            totalCounts:totalCounts,
            currentPage:currentPage,
            // 按钮设置
            first:'<li class="first"><a href="javascript:void(0)">首页</a></li>',
            prev:'<li class="prev"><a href="javascript:void(0)">上一页</a></li>',
            next:'<li class="next"><a href="javascript:void(0)">下一页</a></li>',
            last:'<li class="last"><a href="javascript:void(0)">末页</a></li>',
            page:'<li class="page"><a href="javascript:void(0)">{{page}}</a></li>',
            // 回调函数 ===> 当页面的值发生改变的时候，就回去执行导函数
            onPageChange: function (pageNum) {
                selectAll(pageNum);
            }
        })
    }
</script>

</body>

</html>